<style lang="scss" scoped>
.reply-info {
  font-size: 0.815em;
  color: #9499a0;
  display: flex;
  align-items: center;
  margin-top: 6px;

  span {
    margin-right: 10px;
  }

  .dianzan,
  .huifu {
    cursor: pointer;
  }

  .dianzan i {

    font-size: 13px;
  }
}

::v-deep a.reply-to-user {
  color: #008ac5;
  margin: 6px;
}

::v-deep .emoji-pic {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
}

i.renzheng {
  color: #ea387e;
  font-size: 1.2em;
  margin-left: 2px;
  margin-right: 4px;
}

::v-deep ul.el-pager .number {
  font-weight: normal;
  min-width:24px;
}

.reply {

  // border: 1px solid red;
  display: flex;

  .reply-avatar {
    width: 48px;
    height: 48px;
    margin-right: 8px;

    a {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      i {
        font-size: 40px;
        border: 1px solid #90949e;
        border-radius: 50%;
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

  }

  .reply-right-container {

    flex: 1;

    color: #333;
    border-bottom: 1px solid #eff2f3;
    margin-bottom: 15px;

    .reply-main {

      margin-bottom: 10px;

      .reply-nickname {
        font-size: 0.9em;
        padding-top: 6px;
        margin-bottom: 6px;
      }

      .reply-content {
        margin-bottom: 6px;
        color: #333333;
      }


    }

    .reply-sub {
      padding: 5px 0px 5px 40px;
      // border: 1px solid red;
      color: #333333;

      .reply-sub-item {
        position: relative;
        margin-bottom: 10px;
        .reply-sub-item-avatar {
          position: absolute;
          left: -38px;
          top: -2px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          overflow: hidden;
          i {
            font-size: 24px;
            color: #90949e;
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .reply-sub-user-info {
          font-size: 0.9em;
          display: inline-flex;
          align-items: center;
          margin-right: 6px;

        }

        .reply-sub-content {
          margin-bottom: 6px;
          color: #333;
          display: inline;
          word-break: break-all;

        }
      }
    }

    .reply-total-count {
      font-size: 13px;
      color: #9499a0;
      cursor: pointer;
      display: inline-flex;
      vertical-align: top;
      margin-bottom: 5px;
      &:hover {
        color: #49b1f5;
      }
    }

  }


}
</style>

<template>
  <div class="reply">

    <!-- 评论-头像部分 -->
    <div class="reply-avatar">
      <a href="#">
        <i v-if="!reply.avatarUrl" class="iconfont icon-touxiang"></i>
        <img v-else :src="reply.avatarUrl" alt="">
      </a>
    </div>

    <!-- 评论-右侧部分 -->
    <div class="reply-right-container">

      <!-- 主评论 -->
      <div class="reply-main">
        <div class="reply-nickname">
          <a href="#">
            {{ reply.nickname }}
            <i v-show="reply.isV == 1" class="renzheng iconfont icon-renzhengguanli"></i>
          </a>
        </div>
        <div class="reply-content">
          <span v-html="reply.commentContent"></span>
        </div>
        <div class="reply-info">
          <span>{{ reply.createTime }}</span>
          <span class="dianzan">
                        <i class="iconfont icon-iconfontzhizuobiaozhun023148"></i>
                        {{reply.likeNum}}
                    </span>
          <span class="huifu" @click="showCommentBox(reply)">回复 </span>
        </div>
      </div>

      <!-- 次级评论 -->
      <div class="reply-sub" v-if="computedReplyChildren && computedReplyChildren.length > 0">

        <!-- 次级评论项 -->
        <div class="reply-sub-item" v-for="(subReply, idx) in computedReplyChildren" :key="idx">

          <!-- 次级评论项用户头像, 绝对定位 -->
          <div class="reply-sub-item-avatar">
            <a href="#">
              <i v-if="!subReply.avatarUrl" class="iconfont icon-touxiang"></i>
              <img :src="subReply.avatarUrl" alt="">
            </a>
          </div>

          <!-- 次级评论项用户昵称, 行内样式 inline-flex -->
          <a href="#" class="reply-sub-user-info">
            {{subReply.nickname}} <i v-show="subReply.isV == 1" class="renzheng iconfont icon-renzhengguanli"></i>
          </a>

          <!-- 次级评论项回复内容, 行内样式 inline-->
          <div class="reply-sub-content" v-html="subReply.commentContent"></div>

          <!-- 次级评论项回复信息 -->
          <div class="reply-info">
            <span>{{ subReply.createTime }}</span>
            <span class="dianzan">
                            <i class="iconfont icon-iconfontzhizuobiaozhun023148"></i>
                            {{subReply.likeNum}}
                        </span>
            <span class="huifu" @click="showCommentBox(subReply)">回复 </span>
          </div>

        </div>
      </div>

      <!-- 共多少条回复, 大于3条的时候(不包括3), 才有必要显示。
           默认只显示前三条(但实际上已经请求第一页的数据,每页数据默认5条。如果超过一页,才显示分页。)-->
      <div v-if="replyTotalCount > 3 && !showMoreReply" @click="showMore" class="reply-total-count">
        共 {{replyTotalCount}} 条回复, 点击查看
      </div>

      <!-- 分页显示 -->
      <div class="paging" v-if="showMoreReply && this.replyTotalCount > this.pageSize">
        <el-pagination layout="total,pager" @current-change="handleCurrentChange" :total="replyTotalCount" :page-size="5" hide-on-single-page></el-pagination>
      </div>

      <!-- 评论框 -->

    </div>

  </div>
</template>

<script>
// import {addComment,getReplyListByPage} from '@/api/commentApi'
export default {
  name: 'Reply',
  props:{
    reply: { // 评论数据实体, 由父组件传过来
      type:Object
    },
    index:{ // 当前子组件的索引, 通过属性传过来, 主要用于在父组件中能从v-for循环到的组件中标识到唯一到当前组件
      type:Number
    },
    parentId:{ // 其实就是父评论的
      type:Number
    }
  },
  data() {
    return {
      placeholder: '',
      commentBoxShow:false, /* 是否显示评论框 */
      parentCommentId: '', /* 回复的父评论id（一级评论的id，它会用于查询所有的子评论） */
      replyCommentId:'',   /* 回复的评论id （对哪条评论进行回复）*/
      replyNickname:'',    /* 用于记录要回复的昵称 @某某某 */
      replyTotalCount: 0,  /* 一级评论下共多少条回复 */
      showMoreReply: false, /* 是否显示更多的回复, 用来记录用户有没有点过查看更多回复 */
      pageNum: 1, /* 当前页 */
      pageSize: 5,/* 每页条数 */
      totalPage: 0, /* 总页数 */
    }
  },
  mounted() {
    /* 根据父组件传过来的数据, 初始化 总条数 和 总页数 */
    this.replyTotalCount = this.reply.replyTotalCount
    this.totalPage = Math.ceil(this.replyTotalCount / this.pageSize)
  },
  computed:{

    /* 当前计算的要显示的子评论, 当没有点击查看更多回复时, 回复数量超过3个(不包含3个),仅显示前3个回复 */
    computedReplyChildren() {
      if(!this.showMoreReply && this.replyTotalCount > 3) {
        return this.reply.children.filter((subReply,idx)=>idx <= 2)
      }
      return this.reply.children || []
    }

  },
  methods: {

    /* 请求指定页的数据 */
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage
      /* 请求完数据后, 直接将接口返回的list, 替换掉children, 让vue处理列表渲染 */
      getReplyListByPage({pageNum:this.pageNum, pageSize:this.pageSize, commentId:this.reply.id}).then(res=>{
        this.reply.children = res.list
        this.replyTotalCount = res.totalCount
        this.totalPage = Math.ceil(res.totalCount / res.pageSize)
      })
    },

    /* 点击查看更多 */
    showMore() {
      this.showMoreReply = true
    },

    /* 隐藏评论框, 供父组件调用(父组件可通过$refs拿到当前子组件后,调用此方法即可) */
    hideCommentBox() {
      this.commentBoxShow = false
    },

    /* 显示评论框 */
    showCommentBox(reply) {
      console.log(reply);
      this.commentBoxShow = true

      /* 如果是一级评论, 那么直接取它的id作为父评论id;
         如果不是一级评论, 那么取它的父级评论的id作为父id */
      if(!reply.parentId) {
        this.parentCommentId = reply.id
      } else {
        this.parentCommentId = reply.parentId
      }

      this.replyCommentId = reply.id        /* 回复的评论id （对哪条评论进行回复） */
      this.replyUserId = reply.userId       /* 对谁进行回复(用户id) */
      this.replyNickname = reply.nickname   /* 对谁进行回复(用户昵称) */

      if(reply.parentId) {
        this.placeholder = `回复 @${reply.nickname}`
      } else {
        this.placeholder = ``
      }

      /* 让父组件去关闭其它一级评论下的输入框，因为只能展示一个评论框 */
      this.$emit('closeOtherCommentBoxExcept', this.index)

    },

    /* 发表评论 */
    doComment(commentContent) {

      let content = ''
      // 如果不是对一级评论进行回复, 那就要加上@ 回复谁
      if(this.parentCommentId !== this.replyCommentId) {
        content = `<a href="#" class="reply-to-user">@${this.replyNickname} :</a>`
        commentContent = content + commentContent
      }
      addComment({
        userId:localStorage.getItem("userId"),
        replyUserId:this.replyUserId,
        commentContent,
        parentId: this.parentCommentId,
        replyCommentId: this.replyCommentId
      }).then(res=>{
        console.log(res,'succ');
        if(!this.reply.children) {
          this.reply.children = []
        }
        this.reply.children.push(res) // 虽然不可以直接改父组件通过prop传过来的数据, 但是我不直接改prop,
                                      // 而是改传过来的prop里面的属性，意思是：不能直接改this.reply，但是可以改this.reply里面的children

        // 更新总条数
        this.replyTotalCount++
        this.$toast('success','回复成功')
      })
    },

    /* 在评论之后, 关闭评论框 */
    doAfterComment() {
      this.commentBoxShow = false
    }
  },
  components: {
  }
}
</script>
